<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		#box1{
			width: 900px;
			height: 600px;
			margin: 20px;
			border: 4px solid purple;
		}
		#box2{
			width: 600px;
			height: 400px;
			margin: 100px;
			border: 4px solid dodgerblue;
		}
		#box3{
			width: 300px;
			height: 260px;
			margin: 50px;
			border: 4px solid orange;
			background: orange;
		}
	</style>
	<script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
//			获得box3相对于整个页面的距离
			var re = $("#box3").offset().top;
			alert(re);
		})	
	</script>
	</head>
	<body>
		
		<div id="box1">
			<div id="box2">
				<div id="box3"></div>
			</div>
		</div>
		
		
	</body>
</html>
